import React, {Component} from 'react'
import {Table, Button, Modal, Input} from 'antd';
import './aboutme.js'
import {connect} from 'react-redux'
import axios from 'axios'
import tplFrom from './../tpl/tplfrom'

const {TextArea} = Input;

@connect(
  state => state.user,
)
@tplFrom
class Approve extends Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      title: '',
      list: [],
      selects: []
    }
    this.batchReject = this.batchReject.bind(this)
  }

  showModal = (name, record) => {
    this.props.handleChage('suggest', ' ')
    this.setState({
      visible: true,
      title: name,
      list: record,
    });

  }
  handleOk = (e) => {
    this.setState({
      visible: false,
    });
    if (this.state.title === '审批') {
      let popularfeelingsId = this.state.list.id
      axios.post('vrv-monitor-platform-web/popularfeelingsDispose/checkApprove', {
        popularfeelingsId,
        "popularfeelingsopinion": this.props.state.suggest
      }).then(res => {
        this.props.queryApproval()
      })
    } else if (this.state.title === '驳回') {
      let id = this.state.list.id
      axios.post('vrv-monitor-platform-web/popularfeelingsDispose/reject', {
        id,
        "popularfeelingsOpinion": this.props.state.suggest
      }).then(res => {
        if (res.data.success) {
          this.props.queryApproval()
        }

      })
    }

  }

  // 批量驳回
  batchReject() {
    if (this.state.selects.length < 1) {
      console.log('请选择审批对象')
      return false
    }
    let ids = this.state.selects.join(',')
    axios.post("vrv-monitor-platform-web/popularfeelingsDispose/batchreject", {ids})
      .then(res => {
        if (res.success) {
          console.log('批量驳回成功')
          this.props.queryApproval()
        }
      })
  }

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  render() {
    const columns = [{
      title: '事件内容',
      dataIndex: 'cont',
      className: 'left',
    }, {
      title: '提交人',
      dataIndex: 'referMan',
      className: 'left',
    }, {
      title: '提交时间',
      dataIndex: 'referTime',
      className: 'left',
    }, {
      title: '备注',
      dataIndex: 'remarks',
      className: 'left',
    }, {
      title: '操作',
      dataIndex: 'edit',
      render: (text, record) => (<div>
        {this.props.role !== '3' ? (<Button type='primary' onClick={() => {
          this.showModal('审批', record)
        }}>审批</Button>) : null}
        {this.props.role !== '3' ? <Button style={{marginLeft: 14, color: '#007be2'}} onClick={() => {
          this.showModal('驳回', record)
        }}>驳回</Button> : null}
        {this.props.role === '3' ? <Button style={{marginLeft: 14, color: '#007be2'}}>取消上报</Button> : null}
      </div>)
    }];
    const data = this.props.List.filter(d => d.popularfeelingsStatus === '0').map((d, i) => {
      return {
        id: d.id,
        key: i + 1,
        cont: d.popularfeelingsTitle,
        referMan: d.createName,
        referTime: d.createTime,
        remarks: d.popularfeelingsOpinion
      }
    })
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        let ids = selectedRows.map(d => d.id)
        console.log(ids)
        this.setState({
          selects: ids
        })
      },
    };
    return (
      <div className='m-table'>
        <div className='head'>
          <Button type='primary' size="small">审批</Button>
          <Button size="small" style={{margin: '0 50px 0 15px', color: '#007be2'}}
                  onClick={this.batchReject}>驳回</Button>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
        <Modal
          title={this.state.title}
          visible={this.state.visible}
          cancelText='取消'
          okText='确定'
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
        <TextArea onChange={v => {
          this.props.handleChage('suggest', v.target.value)
        }} value={this.props.state.suggest} placeholder="输入个人意见" autosize={{minRows: 5, maxRows: 6}}/>
        </Modal>
      </div>
    )
  }
}

export default Approve